<template>
  <a-modal okText="确定" cancelText="取消" :width="700" @ok="ok"
           @cancel="close" :title="title || '列表显示项'" v-model="visible">
    <a-row type="flex">
      <a-col :span="10">
        <select multiple class="field-show-config-selector" v-model="leftSelected">
          <option @dblclick="addOne(item)" v-for="item in fieldList" :value="item.id">{{ item.labelName }}</option>
        </select>
      </a-col>
      <a-col :span="2" style="display: flex; align-items: center; justify-content: center">
        <div class="field-show-config-button-container">
          <div class="toRightButton" @click="addNew">
            <span class="iconfont" style="font-size: 35px">&#xeb92;</span>
          </div>
          <div class="toLeftButton" @click="remove">
            <span class="iconfont" style="font-size: 35px">&#xeb8f;</span>
          </div>
        </div>
      </a-col>

      <a-col :span="10">
        <select multiple class="field-show-config-selector" v-model="rightSelected">
          <option @dblclick="() => setLabel(item)" v-for="item in dataSource" :value="item.id">{{item.label || item.labelName}}</option>
        </select>
      </a-col>
      <a-col :span="2" style="display: flex; align-items: center; justify-content: center">
        <div class="field-show-config-button-container">
          <div class="toRightButton">
            <span class="iconfont" @click="moveup" style="font-size: 35px">&#xebae;</span>
          </div>
          <div class="toLeftButton">
            <span class="iconfont" @click="movedown" style="font-size: 35px">&#xebb7;</span>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-modal okText="确定" cancelText="取消" :width="700" @cancel="() => visible1 = false"
              title="修改名称" v-model="visible1" @ok="() => visible1 = false">
      <Row label="字段名称">
        <a-input v-model="editing.label" placeholder="请输入字段名称"/>
      </Row>
    </a-modal>
  </a-modal>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';

export default {
  name: 'FieldShowConfigModal',
  components: {Row},
  props: {
    title: createProps(String),
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      editing: {label: undefined},
      visible: false,
      visible1: false,
      leftSelected: [],
      rightSelected: [],
      dataSource: []
    };
  },
  methods: {
    open(dataSource) {
      this.visible = true;
      this.leftSelected = [];
      this.rightSelected = [];
      dataSource = dataSource || [];
      this.resolveFieldLabel(dataSource)
      this.dataSource = dataSource;
    },
    close() {
      this.visible = false;
    },
    addOne(item) {
      if (this.dataSource.findIndex(field => field.id === item.id) === -1) {
        this.dataSource.push(item);
      }
    },
    setLabel(item) {
      this.editing = item;
      this.visible1 = true;
    },
    removeOne(item) {
      let index = this.dataSource.findIndex(field => field.id === item.id);
      if (index !== -1) {
        this.dataSource.splice(index, 1);
      }
    },
    ok() {
      if (!this.dataSource || !this.dataSource.length) {
        this.$message.error('请选择列表显示字段');
        return;
      }
      this.$emit('ok', this.dataSource);
      this.close();
    },
    addNew() {
      let list = this.leftSelected
      .filter(id => this.dataSource.findIndex(field => field.id === id) === -1)
      .map(id => this.fieldList.find(f => f.id === id));
      this.dataSource.push(...list);
      this.dataSource = JSON.parse(JSON.stringify(this.dataSource));
      this.leftSelected = [];
    },
    remove() {
      let set = new Set(this.rightSelected);
      this.dataSource = this.dataSource.filter(field => !set.has(field.id));
      this.rightSelected = [];
    },
    moveup() {
      if (!this.rightSelected || !this.rightSelected.length) return;
      let indexes = this.rightSelected.map(id => this.dataSource.findIndex(field => field.id === id)).sort();
      if (indexes[0] <= 0) return;
      indexes.forEach(index => {
        let temp = this.dataSource[index];
        this.dataSource[index] = this.dataSource[index - 1];
        this.dataSource[index - 1] = temp;
      });
      this.dataSource = [...this.dataSource];
    },
    movedown() {
      if (!this.rightSelected || !this.rightSelected.length) return;
      let indexes = this.rightSelected.map(id => this.dataSource.findIndex(field => field.id === id)).sort().reverse();
      if (indexes[0] >= this.dataSource.length - 1) return;

      indexes.forEach(index => {
        let temp = this.dataSource[index];
        this.dataSource[index] = this.dataSource[index + 1];
        this.dataSource[index + 1] = temp;
      });
      this.dataSource = [...this.dataSource];
    },
    resolveFieldLabel(list) {
      list.forEach(f => {
        let tempField = this.formDefinition.fields.find(field => field.id === f.id)
        f.labelName = `[主表] ${tempField && tempField.label || ''}`;
      })
    },
  },
  computed: {
    fieldList() {
      let res = [];
      let fields = this.formDefinition.fields || [];
      fields.forEach(f => {
        res.push({
          id: f.id,
          labelName: `[主表] ${f.label}`,
        });
      });
      return res.filter(f => this.dataSource.findIndex(field => field.id === f.id) === -1);
    },
  }
};
</script>
<style>
.field-show-config-selector option {
  padding: 2px 0 2px 10px;
}

.field-show-config-selector {

}

.field-show-config-selector {
  outline: none;
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
  min-height: 400px;
  user-select: none;
}

.field-show-config-button-container .toRightButton {
  margin-bottom: 50px;
}

.field-show-config-button-container .toRightButton:hover,
.field-show-config-button-container .toLeftButton:hover {
  color: #42b3e5;

}

.field-show-config-button-container .toRightButton,
.field-show-config-button-container .toLeftButton {
  color: #bdd2e2;
  user-select: none;
  font-size: 35px !important;
  cursor: pointer;
}
</style>